<template>
    <div class="common-page page-flow-demands-type1" v-loading.fullscreen="loading">
        <div class="common-page__head">
            <!-- <comp-paths class="route" :paths="['/flow', $route.fullPath]"></comp-paths> -->
            <div class="title">
                <span class="text">{{ $options.title }}</span>
                <el-button type="plain" size="small" icon="el-icon-plus" @click="addDemand()" v-if="self">提交需求</el-button>
            </div>
        </div>
        <comp-demands class="common-page__body" ref="list" category="type1" select link>
            <!-- <template #head="scope">
                <el-button type="plain" size="small" icon="el-icon-refresh" @click="search()">刷新列表</el-button>
            </template> -->
            <template #body="scope">
                <el-button type="primary" size="mini" @click.stop="setDemandStatus(scope.data)" v-if="profile && scope.data.approved === 'yes' && scope.data.status !== 'finished'">已解决</el-button>
                <el-button type="plain" size="mini" @click.stop="addDemandRecord('start', scope.data)" v-if="profile && scope.data.approved === 'yes' && scope.data.status !== 'finished'">回复</el-button>
            </template>
        </comp-demands>
        <comp-dialog title="需求回复" ref="demandRecord">
            <el-form size="small" label-width="98px" style="margin-right: 20px" @submit.native.prevent v-if="demandRecord">
                <el-form-item label="回复内容：" required>
                    <el-input type="textarea" v-model="demandRecord.content" style="width: 360px" placeholder="请输入" :maxlength="200" :rows="5" resize="none" :readonly="loading" @change="addDemandRecord('validate')"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="addDemandRecord('submit')">提交</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="addDemandRecord('end')">取消</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int } from "../util";
    export default {
        name: "page-flow-demands-type1",
        title: "我提交的",
        nodes: ["/menu/flow"],
        childs: ["flow-demand"],
        mixins: [mixin],
        data: () => ({
            loading: false,
            demand: null,
            demandRecord: null,
            self: false,
        }),
        methods: {
            search() {
                if (this.loading) return;
                this.$nextTick(() => this.$refs.list.init());
            },
            addDemand() {
                if (this.loading) return;
                this.$router.push("/flow/demand/add");
            },
            setDemandStatus(demand) {
                if (this.loading) return;
                this.plugins.modal.alert("操作确认", "确定已经解决了吗？", "warning", ["确定已解决", "还没有"]).then((ok) => {
                    if (!ok) return;
                    this.loading = true;
                    this.plugins.user.setDemandStatus(demand, "finished").then((res) => {
                        this.loading = false;
                        if (res.code === -1) return;
                        if (res.code === 0) {
                            this.plugins.modal.toast("操作成功！", "success");
                            this.search();
                        } else {
                            this.plugins.modal.alert("操作失败：", res.code + "：" + res.msg, "error");
                        }
                    });
                });
            },
            addDemandRecord(action, data) {
                if (this.loading) return;
                let demand = this.demand;
                let form = this.demandRecord;
                if (action === "start" || !action) {
                    this.demand = data;
                    this.demandRecord = this.plugins.user.formatDemandRecord();
                    this.demandRecord.type = "reply";
                    this.addDemandRecord("validate");
                    this.$refs.demandRecord.init();
                } else if (action === "validate") {
                    let error = "";
                    form.content = string(form.content).trim();
                    error = error || (form.content ? "" : "请先输入回复内容！");
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "submit") {
                    if (!this.addDemandRecord("validate", true)) return;
                    this.loading = true;
                    this.plugins.user.addDemandRecord(demand, form).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("提交成功！", "success");
                            this.addDemandRecord("end");
                            // this.search();
                        } else {
                            this.plugins.modal.alert("提交失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    this.$refs.demandRecord.close();
                }
            },
            destroy() {
                if (this.loading) return;
                return true;
            },
            init() {
                if (this.loading) return;
                this.loading = true;
                this.$root.$refs.navbar.init();
                this.plugins.user.call(async () => {
                    let res = await this.plugins.user.init();
                    if (res.code === 0) { }
                    return res;
                }, async () => {
                    if (this.access(this.$route.name)) return { code: 0 };
                    return this.env.xhrErrors.find((error) => error.code === 4);
                }).then((res) => {
                    this.loading = false;
                    this.$root.$refs.navbar.init();
                    if (res.code === 0) {
                        this.self = this.profile.role === "holder" || this.profile.role === "staff";
                        this.search();
                    } else if (res.code === 2) {
                        this.$root.$refs.navbar.login();
                    } else {
                        this.plugins.modal.alert("页面加载失败", res.code + "：" + res.msg, "error").then(() => this.$router.replace("/home"));
                    }
                });
            },
        },
    };
</script>

<style lang="scss">
    .page-flow-demands-type1 {
        overflow: hidden;
    }
</style>